import { Fragment } from '@/components/Fragment'; 
import { Label } from '@aws-amplify/ui-react';
import StandardHTMLAttributes from '@/components/StandardHTMLAttributes.mdx';
import { Example, ExampleCode } from '@/components/Example';
import {
  AccessibilityExample,
  DefaultLabelExample,
  StylePropsExample,
} from './examples';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';

## Usage

Import the Label component and pair it with a field control.

<Example>
  <DefaultLabelExample />
  <ExampleCode>
```jsx file=./examples/DefaultLabelExample.tsx

```
  </ExampleCode>
</Example>

### Accessibility 

Label is used to visually and programmatically associate a text label with a form control. Clicking on a label will highligh the associated field, and a screen reader can read the text label, allowing an accessibility technology user to understand the purpose of a form control.

<Example>
  <AccessibilityExample />
  <ExampleCode>
```jsx file=./examples/AccessibilityExample.tsx
```
  </ExampleCode>
</Example>

<StandardHTMLAttributes component="Label" link="label" element="<label>" />


## CSS Styling

### Target classes

<ComponentStyleDisplay componentName="Label" />

### Global styling

To override styling on all Input primitives, you can set the Amplify CSS variables with the built-in `.amplify-input` class.

<Example>
  <Label
    className="globally-styled-label"
  >
  Globally styled label
  </Label>
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-input {
      font-style: italic;
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Input, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <Label className="custom-label-class">Custom styled label</Label>
  <ExampleCode>
    ```css
    /* styles.css */
    .custom-label-class.amplify-label {
      color: rebeccapurple;
    }
    ```
  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <StylePropsExample />
  <ExampleCode>
```jsx file=./examples/StylePropsExample.tsx

```

  </ExampleCode>
</Example>
